<template>
    <div>
        <div class="bg"></div>
        <div>
            <div style="position: relative">
                <img src="../../assets/img/wood1.png" class="wood" alt="">
                <div class="toask">
                    <span><i class="el-icon-edit"></i>我要提问</span>
                </div>
            </div>
        </div>
        <div class="formToAsk">
            <el-form  status-icon label-width="160px" :rules="rules" :model="AskForm" ref="AskFormRef">
                <el-form-item label="问题题目" prop="title" required>
                    <el-input v-model="AskForm.title" autocomplete="off" placeholder="请输入题目名字"></el-input>
                </el-form-item>
                <el-form-item label="问题投放区域" prop="typeId" required>
                    <el-select v-model="AskForm.typeId" placeholder="请选择问题投放分类">
                        <el-option v-for="item in AllTypes" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题内容" prop="content" required>
                    <el-input type="textarea" v-model="AskForm.content"
                              :autosize="{ minRows: 5, maxRows: 10}"
                              placeholder="赶紧输入你想问大家的问题吧~~"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;justify-content:center;">
                        <el-button style="margin-top: 20px;" @click="sumitQuestion" plain type="warning">
                            <i class="el-icon-s-opportunity">去提问</i>
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Ask",
        data(){
            return{
                AskForm:{
                    username:localStorage.getItem('username'),
                    typeId: '',
                    title: '',
                    content: ''
                },
                rules: {
                    title: [
                        { required: true, message: '请输入问题题目', trigger: 'blur' },
                    ],
                    typeId: [
                        { required: true, message: '请选择分类', trigger: 'blur' },
                    ],
                    content: [
                        { required: true, message: '请输入问题内容', trigger: 'blur' },
                    ]
                },
                AllTypes:[],
                loading:true,
            }
        },
        created() {
            this.getTypeList()
        },
        methods:{
            async getTypeList(){
                this.loading = true
                const { data: res } = await this.$http.get('/type/')
                console.log(res)
                if (res.code !== 200){
                    this.loading = true
                    return this.WarningMsg(res.msg)
                }
                this.AllTypes = res.data
                if(res.data.length == this.AllTypes.length) {
                    this.loading = false
                }
            },
            sumitQuestion(){
                this.loading = true
                this.$refs.AskFormRef.validate(async valid => {
                    // console.log(this.AskForm)
                    if (!valid) return
                    const { data: res } = await this.$http.post('/ask/add',this.AskForm)
                    // console.log(res)
                    if(res.code !== 200){
                        this.loading = false
                        return this.WarningMsg(res.msg)
                    }
                    this.$message.success('提交成功')
                    this.$refs.AskFormRef.resetFields()
                })
                this.loading = false
            },
        }
    }
</script>

<style scoped>
    .formToAsk{
        margin-left: 14%;
        margin-top:4%;
        width: 60%
    }
    .wood{
        width: 12%;
        height: 13%;
        margin-top: 10px;
        margin-left: 10px;
    }
    .toask{
        position: absolute;
        top: 40%;
        left: 26px;
        font-size: 10px;
        color: #3b2403;
        cursor: pointer;
    }
    .bg{
        background: url(../../assets/img/1.jpg);
        /*background-color: #F7F7F7;*/
        background-size: 100% 100%;
        height: 100%;
        opacity: 0.2;
        position: fixed;
        width: 100%;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    /deep/.el-form-item__label{
        color: #620a23;
        font-weight: bold;
    }
</style>
